//useEffect-清除副作用
//在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，
//比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用
//说明:清除副作用的函数最常见的执行时机是在组件卸载时自动执行

import { useEffect, useState } from "react";

//需求:在Son组件渲染时开启一个定制器，卸载时清除这个定时器

function Son(){
  //渲染时开启一个定时器
  useEffect(()=>{
    const timer = setInterval(()=>{
      console.log("定时器执行中...");
    },1000)

    return () =>{
      //清除副作用
      clearInterval(timer)
    }
  },[])

  return <div>this is son component</div>
}

function App() {
  //通过条件渲染模拟组件卸载
  const [show,setShow] = useState(true)

  return (
    <div className="App">
      this is a app
      { show && <Son/> }
      <button onClick={ ()=> setShow(false)}>卸载son组件</button>
    </div>
  );
}

export default App;
